<template>
  <div class="home-container">
    <div class="top-box">
      <div class="title1">
        <p style="color: #555555; font-size: 32px; font-weight: 700">
          我的设计方案
        </p>
      </div>
      <div class="btns">
        <el-button type="warning" icon="el-icon-upload" @click="globalScheme"
          >全局方案</el-button
        >
        <el-button type="warning" icon="el-icon-upload" @click="productDesign"
          >单品设计</el-button
        >
      </div>
    </div>

    <div class="title2">
      <h1>全局方案</h1>
    </div>
    <div class="commodity_ul">
      <div
        class="commodity_ul_li"
        v-for="(i, index) in this.commoditylist"
        :key="index"
        @click="router_id(i)"
        style="cursor: pointer"
      >
        <div class="commodity_ul_li_info">
          <div class="img">
            <img :src="'http://127.0.0.1:8000' + i.images[0].image" alt="" />
          </div>
          <div style="display: flex; justify-content: space-between">
            <p>{{ i.big_name }}</p>
            <p>➤</p>
          </div>
        </div>
      </div>
    </div>
    <el-empty
      v-if="this.Empty1"
      description="您还没有上传全局方案哦"
      :image-size="150"
    ></el-empty>
    <div class="title2">
      <h1>单品设计</h1>
    </div>
    <div class="syleimgs">
      <div
        class="itmes"
        v-for="(i, index) in this.sylelist"
        :key="index"
        @click="goToDetail(i)"
      >
        <img :src="'http://127.0.0.1:8000' + i.images[0].image" alt="" />
      </div>
    </div>
    <el-empty
      v-if="this.Empty2"
      description="您还没有上传单品设计哦"
      :image-size="150"
    ></el-empty>
    <Footer />
    <!-- 全局方案弹框 -->
    <div>
      <el-dialog title="上传全局方案" :visible.sync="openGlobal" width="800px">
        <el-form
          ref="globalForm"
          :model="globalForm"
          :rules="globalRules"
          :inline="true"
          class="visible"
          label-width="120px"
        >
          <el-form-item label="家居类型" prop="inspiration_classification">
            <el-select
              v-model="globalForm.inspiration_classification"
              style="width: 240px"
            >
              <el-option label="卧室" value="1"></el-option>
              <el-option label="客厅" value="2"></el-option>
              <el-option label="厨房" value="3"></el-option>
              <el-option label="餐厅" value="4"></el-option>
              <el-option label="浴室" value="5"></el-option>
              <el-option label="门厅" value="6"></el-option>
              <el-option label="书房" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="大标题" prop="big_name">
            <el-input
              v-model="globalForm.big_name"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="创作理念" prop="big_description">
            <el-input
              type="textarea"
              v-model="globalForm.big_description"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="小标题" prop="small_name">
            <el-input
              v-model="globalForm.small_name"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="简述" prop="small_description">
            <el-input
              type="textarea"
              v-model="globalForm.small_description"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <!-- 图片上传组件 -->
          <div class="pic">
            <!-- 图片上传组件 -->
            <el-form-item label="图片(至少3张)">
              <el-upload
                action="#"
                list-type="picture-card"
                :file-list="file"
                :limit="3"
                :on-exceed="handleExceedone"
                :on-change="beforeUploadone"
                @remove="handleRemovetwo"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemoveone(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelOne">取 消</el-button>
          <el-button type="primary" @click="validationOne">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 单品设计弹框 -->
    <div>
      <el-dialog title="上传单品设计" :visible.sync="openDesign" width="800px">
        <el-form
          ref="productDesignForm"
          :model="productDesignForm"
          :rules="productDesignRules"
          :inline="true"
          class="visible"
          label-width="120px"
        >
          <el-form-item label="单品名称" prop="name">
            <el-input
              v-model="productDesignForm.name"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="家居风格" prop="style_classification">
            <el-select
              v-model="productDesignForm.style_classification"
              style="width: 240px"
            >
              <el-option label="原木风" value="1"></el-option>
              <el-option label="北欧风" value="2"></el-option>
              <el-option label="简约风" value="3"></el-option>
              <el-option label="新中式" value="4"></el-option>
              <el-option label="轻奢风" value="5"></el-option>
              <el-option label="侘寂风" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材质" prop="material">
            <el-input
              v-model="productDesignForm.material"
              style="width: 240px"
            ></el-input>
          </el-form-item>

          <el-form-item label="尺寸/规格" prop="size">
            <el-input
              v-model="productDesignForm.size"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="颜色" prop="color">
            <el-input
              v-model="productDesignForm.color"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="设计理念" prop="design_concept">
            <el-input
              type="textarea"
              v-model="productDesignForm.design_concept"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <el-form-item label="工艺概述" prop="process_overview">
            <el-input
              type="textarea"
              v-model="productDesignForm.process_overview"
              style="width: 240px"
            ></el-input>
          </el-form-item>
          <!-- 图片上传组件 -->
          <div class="pic">
            <!-- 图片上传组件 -->
            <el-form-item label="图片(至少3张)">
              <el-upload
                action="#"
                list-type="picture-card"
                :file-list="file"
                :limit="4"
                :on-exceed="handleExceedtwo"
                :on-change="beforeUploadtwo"
                @remove="handleRemovetwo"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemovetwo(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelTwo">取 消</el-button>
          <el-button type="primary" @click="validationTwo">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addglobals, getmyinspirations } from "@/api/inspiration.js";
import { addstyles, getmystyles } from "@/api/classification.js";
import Footer from "../components/footer.vue";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      Empty1: false,
      Empty2: false,
      openGlobal: false, //全局
      openDesign: false, //单品
      // 全局方案表单
      globalForm: {
        inspiration_classification: "",
        big_name: "",
        big_description: "",
        small_name: "",
        small_description: "",
      },
      // 用户选择的图片
      file: [],
      disabled: false, //图片删除
      fileList: [],
      // 单品方案表单
      productDesignForm: {
        name: "",
        style_classification: "",
        material: "",
        size: "",
        color: "",
        design_concept: "",
        process_overview: "",
      },
      commoditylist: [],
      sylelist: [],
      // 全局规则
      globalRules: {
        inspiration_classification: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        big_name: [
          { required: true, message: "请输入大标题", trigger: "blur" },
        ],
        big_description: [
          { required: true, message: "请输入创作理念", trigger: "blur" },
        ],
        small_name: [
          { required: true, message: "请输入小标题", trigger: "blur" },
        ],
        small_description: [
          { required: true, message: "请输入简述", trigger: "blur" },
        ],
      },
      // 单品规则
      productDesignRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        style_classification: [
          { required: true, message: "请选择风格", trigger: "blur" },
        ],
        material: [{ required: true, message: "请输入材质", trigger: "blur" }],
        size: [{ required: true, message: "请输入规格", trigger: "blur" }],
        color: [{ required: true, message: "请输入颜色", trigger: "blur" }],
        design_concept: [
          { required: true, message: "请输入设计理念", trigger: "blur" },
        ],
        process_overview: [
          { required: true, message: "请输入工艺概述", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getMyDesign();
    this.getMyStyles();
  },
  methods: {
    // 全局设计
    globalScheme() {
      this.openGlobal = true;
    },
    handleExceedone(files, fileList) {
      this.$message.warning(`最多只能上传 3 张图片`);
    },
    beforeUploadone(file) {
      this.fileList.push(file.raw);
      this.file.push(file);
      return false;
    },
    handleRemoveone(file) {
      this.file.forEach((element, index) => {
        if (element.uid === file.uid) {
          this.file.splice(index, 1);
          this.fileList.splice(index, 1);
        }
      });
      console.log("file", this.file);
      console.log("fileList", this.fileList);
    },
    validationOne() {
      this.$refs["globalForm"].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          // 添加表单信息到formData
          Object.keys(this.globalForm).forEach((key) => {
            formData.append(key, this.globalForm[key]);
          });
          // 添加图片文件到formData
          this.fileList.forEach((element, index) => {
            formData.append(`uploaded_images[${index}]`, element);
          });
          console.log(formData);
          // 调用接口方法进行上传
          addglobals(formData)
            .then((res) => {
              this.$message.success("添加成功");
              // 重置表单
              this.clearData();
              this.openGlobal = false;
              this.getMyDesign();
            })
            .catch((err) => {
              this.$message.error("添加失败");
              console.error("添加全局方案失败:", err);
            });
        } else {
          this.$message.error("请完成表单验证");
        }
      });
      this.getMyDesign();
    },
    cancelOne() {
      this.openGlobal = false;
      this.clearData();
    },
    // 单品设计
    productDesign() {
      this.openDesign = true;
    },
    handleExceedtwo(files, fileList) {
      this.$message.warning(`最多只能上传 3 张图片`);
    },
    beforeUploadtwo(file) {
      this.fileList.push(file.raw);
      this.file.push(file);
      return false;
    },
    handleRemovetwo(file) {
      this.file.forEach((element, index) => {
        if (element.uid === file.uid) {
          this.file.splice(index, 1);
          this.fileList.splice(index, 1);
        }
      });
      console.log("file", this.file);
      console.log("fileList", this.fileList);
    },

    validationTwo() {
      this.$refs["productDesignForm"].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          // 添加表单信息到formData
          Object.keys(this.productDesignForm).forEach((key) => {
            formData.append(key, this.productDesignForm[key]);
          });
          // 添加图片文件到formData
          this.fileList.forEach((element, index) => {
            formData.append(`uploaded_images[${index}]`, element);
          });
          console.log(formData);
          // 调用接口方法进行上传
          addstyles(formData)
            .then((res) => {
              this.$message.success("添加成功");
              // 重置表单
              this.clearData();
              this.openDesign = false;
              this.getMyStyles();
            })
            .catch((err) => {
              this.$message.error("添加失败");
              console.error("添加全局方案失败:", err);
            });
        } else {
          this.$message.error("请完成表单验证");
        }
      });
    },
    cancelTwo() {
      this.openDesign = false;
      this.clearData();
    },
    // 清空数据
    clearData() {
      this.globalForm = {};
      this.productDesignForm = {};
      this.fileList = []; // 清空文件列表
      this.file = []; // 清空文件数组
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles(); // 清空上传的文件
      }
    },
    // 获取自己的全局设计
    getMyDesign() {
      getmyinspirations().then((res) => {
        this.commoditylist = res;
        if (this.commoditylist.length !== 0) {
          this.Empty1 = false;
        } else {
          this.Empty1 = true;
        }
      });
    },
    // 获取自己的单品设计
    getMyStyles() {
      getmystyles().then((res) => {
        this.sylelist = res;
        if (this.sylelist.length !== 0) {
          this.Empty2 = false;
        } else {
          this.Empty2 = true;
        }
      });
    },
    // 跳转全局详情页
    router_id(i) {
      this.$router.push({ path: "/itemDetails", query: { id: i.id } });
      console.log(i.id);
    },
    // 跳转单品详情页
    goToDetail(i) {
      this.$router.push({ path: "/productDetails", query: { id: i.id } });
      console.log(i.id);
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .top-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .title1 {
      margin-top: 5px;
      border-bottom: 5px solid #f59a23;
      padding-bottom: 5px;
      margin-left: 40%;
    }
    .btns {
      margin-left: 13%;
      margin-top: 20px;
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .title2 {
    margin-top: 40px;
    margin-left: 5%;
  }
  .commodity_ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 创建4列 */
    gap: 16px; /* 设置元素之间的间距 */
    padding: 0 8%;
    .commodity_ul_li {
      margin-top: 30px;
      .commodity_ul_li_info {
        display: flex;
        flex-direction: column;
        .img {
          img {
            max-width: 100%;
            object-fit: cover;
          }
        }
        p {
          margin-top: 20px;
          font-size: 18px;
          font-weight: 700;
          color: #333333;
        }
      }
    }
  }
  .commodity_ul_li .commodity_ul_li_info {
    overflow: hidden; /* 保持盒子大小不变，隐藏超出部分 */
  }

  .commodity_ul_li .img img {
    transition: transform 0.3s ease-in-out;
  }

  .commodity_ul_li .img img:hover {
    transform: scale(1.1); /* 放大图片 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
  }
  .syleimgs {
    width: 84%;
    padding-top: 30px;
    padding-left: 8%;
    column-count: 4; /* 控制列数 */
    column-gap: 1rem; /* 控制列之间的间距 */
    img {
      width: 100%;
      margin-bottom: 10px;
      display: block;
    }
  }
  .syleimgs .itmes {
    transition: transform 0.3s ease-in-out;
  }

  .syleimgs .itmes:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.468);
  }
}
</style>
